<template>
  <div class='dashBoard-container'>
    <a-row :gutter="30">
      <a-col :span="6">
        <div class='grayBg'>
          <div class='fx_end'>
            <div>
              <p style="font-size: 12px;color: #615851;">CPU使用率</p>
              <p style='font-weight: 600;font-size: 24px;color: #272624;margin-top:30px;'>{{list.cpuUsed}}%</p>
            </div>
            <Gauge :chartData="{ name: '', value: (list.cpuUsed)/100 }" height="140px"></Gauge>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class='grayBg'>
          <div class='fx_end'>
            <div>
              <p style="font-size: 12px;color: #615851;">CPUJVM内存率</p>
              <p style='font-weight: 600;font-size: 24px;color: #272624;margin-top:30px;'>{{list.jvmUsed}}G</p>
              <div style='margin-top:15px'>
                <span class='rectangle'></span>
                <span style='font-size: 10px;color: #333333;'>总JVM内存 {{list.jvmTotal}}G</span>
              </div>
            </div>
            <Gauge :chartData="{ name: '', value: isNaN(list.jvmUsed/list.jvmTotal)?0:list.jvmUsed/list.jvmTotal }"
              height="140px" width="60%"></Gauge>
          </div>

        </div>
      </a-col>
      <a-col :span="6">
        <div class='grayBg'>
          <div class='fx_end'>
            <div>
              <p style="font-size: 12px;color: #615851;">磁盘占有</p>
              <p style='font-weight: 600;font-size: 24px;color: #272624;margin-top:30px;'>{{list.diskUsed}}G</p>
              <div style='margin-top: 15px'>
                <span class='rectangle'></span>
                <span style='font-size: 10px;color: #333333;'>总磁盘大小 {{list.diskTotal}}G</span>
              </div>
            </div>
            <Gauge :chartData="{ name: '', value: isNaN(list.diskUsed/list.diskTotal)?0:list.diskUsed/list.diskTotal }"
              height="140px" width="60%"></Gauge>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class='grayBg'>
          <div class='fx_end'>
            <div>
              <p style="font-size: 12px;color: #615851;">系统内存</p>
              <p style='font-weight: 600;font-size: 24px;color: #272624;margin-top:30px;'>{{list.memoryUsed}}G</p>
              <div style='margin-top: 15px'>
                <span class='rectangle'></span>
                <span style='font-size: 10px;color: #333333;'>系统内存 {{list.memoryTotal}}G</span>
              </div>
            </div>
            <Gauge
              :chartData="{ name: '', value: isNaN(list.memoryUsed/list.memoryTotal)?0:list.memoryUsed/list.memoryTotal }"
              height="140px" width="60%"></Gauge>
          </div>
        </div>
      </a-col>

    </a-row>
    <a-row style='margin-top:16px'>
      <a-col :span="24">
        <div class='whiteBg'>
          <div style="padding:22px">
            <div class="fx_end" style='margin-bottom:12px;'>
              <div>CPU使用率</div>
              <div>
                <a-radio-group v-model:value="barType" @change="statisticst" style='margin-right:20px'>
                  <a-radio-button value="1">最近1小时</a-radio-button>
                </a-radio-group>
                <a-date-picker showTime format="YYYY-MM-DD HH" placeholder="请选择时间" v-model:value="searchParams.date1"
                  :disabled-date="disabledDate" @change="handleChangeSearchDate"></a-date-picker>
              </div>
            </div>
            <LineMulti v-if='list.cpuLineData.length>0' :chartData="list.cpuLineData" height="300px"
              :option="multiBarOption" type="line"></LineMulti>
            <a-empty v-else />
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="18" style='margin-top:16px'>
      <a-col :span="12">
        <div class='whiteBg'>
          <div style="padding:22px">
            <div class="fx_end" style='margin-bottom:12px;'>
              <div>系统内存使用率趋势</div>
              <div>
                <a-date-picker showTime format="YYYY-MM-DD HH" placeholder="请选择时间" :defaultValue="defaultDate"
                  :disabled-date="disabledDate" v-model:value="searchParams.date2"
                  @change="handleChangeSearchDate2"></a-date-picker>
              </div>
            </div>
            <LineMulti v-if='list.jvmLineData.length>0' :chartData="list.jvmLineData" height="300px"
              :option="multiBarOption1" type="line"></LineMulti>
            <a-empty v-else />
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class='whiteBg'>
          <div style="padding:22px">
            <div class="fx_end" style='margin-bottom:12px;'>
              <div>JVM内存使用率趋势</div>
              <div>
                <a-date-picker showTime format="YYYY-MM-DD HH" placeholder="请选择时间" :defaultValue="defaultDate"
                  :disabled-date="disabledDate" v-model:value="searchParams.date3"
                  @change="handleChangeSearchDate3"></a-date-picker>
              </div>
            </div>
            <LineMulti v-if='list.memoryLineData.length>0' :chartData="list.memoryLineData" height="300px"
              :option="multiBarOption1" type="line">
            </LineMulti>
            <a-empty v-else />
          </div>
        </div>
      </a-col>
    </a-row>


  </div>
</template>
<script lang="ts" setup>
  import moment from 'moment'; // 需要安装moment.js
  import dayjs from 'dayjs';
  import { ref, reactive, onMounted, onBeforeUnmount, unref } from 'vue';
  import LineMulti from '/@/components/chart/LineMulti.vue';
  import Gauge from '/@/components/chart/Gauge.vue';
  import { getOperationInfo, getCpuLineInfo, getJvmLineInfo, getMemoryLineInfo } from './DashBoard.ts';

  const loading = ref(true);
  const barType = ref('1');
  const currentDate = ref(null);
  const singleLineOption = {
    grid: { left: '5%', right: '5%' },
    areaStyle: {
      borderColor: '#000000', // 设置边界线颜色
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#BAC9F0'  // 100% 处的颜色
        }, {
          offset: 1, color: 'rgba(186,201,240,0.3)' //   0% 处的颜色
        }],
        global: false // 缺省为 false
      },
    },

  };
  const multiBarOption = {
    grid: { left: '5%', right: '5%' },
    lineStyle: {
      color: '#E1964C',
    },
    series: {
      symbolSize: 10,
      symbol: "emptyCircle",
      itemStyle: {
        normal: {
          color: '#E1964C', // 设置标记点颜色
          borderWidth: 2 // 设置标记点边框宽度
        }
      }
    }
  };
  const multiBarOption1 = {
    grid: { left: '5%', right: '5%', top: "7%", bottom: "7%" },
    lineStyle: {
      color: '#2735C3',
    },
    series: {
      symbol: "none",
    }
  };
  const defaultDate = ref(dayjs().startOf('day'));
  // 查询区域存储值
  const searchParams = reactive({
    date1: '',
    date2: '',
    date3: '',
  });
  let list = reactive({
    cpuUsed: 0,
    diskTotal: 0,
    diskUsed: 0,
    jvmTotal: 0,
    jvmUsed: 0,
    memoryTotal: 0,
    memoryUsed: 0,
    cpuLineData: [],
    jvmLineData: [],
    memoryLineData: [],
  });
  const listQuery1 = {
    endDateTime: '',
    selectType: '1',
    startDateTime: ''
  };
  const listQuery2 = {
    endDateTime: moment().format('YYYY-MM-DD HH'),
    selectType: '',
    startDateTime: moment().format('YYYY-MM-DD HH')
  };
  const listQuery3 = {
    endDateTime: moment().format('YYYY-MM-DD HH'),
    selectType: '',
    startDateTime: moment().format('YYYY-MM-DD HH'),
  };

  //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
  function dateFormat(time) {
    var date = new Date(time);
    var year = date.getFullYear();
    /* 在日期格式中，月份是从0开始的，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours;
  }

  function getCurrentData() {
    return new Date().toLocaleDateString();
  }

  function disabledDate(current) {
    // 禁用今天之后的日期
    return current && current > dayjs().endOf('day');
  }


  // 选择统计类别
  function statisticst(e) {
    barType.value = e.target.value
    listQuery1.selectType = e.target.value.toString()
    listQuery1.startDateTime = ''
    listQuery1.endDateTime = ''
    cpuLineInfo()
  }

  function handleChangeSearchDate(_value) {
    barType.value = '4'
    listQuery1.selectType = '4'
    searchParams.date1 = _value
    listQuery1.startDateTime = dateFormat(_value)
    listQuery1.endDateTime = dateFormat(_value)
    cpuLineInfo()
  }
  function handleChangeSearchDate2(_value) {
    searchParams.date2 = _value
    listQuery2.startDateTime = dateFormat(_value)
    listQuery2.endDateTime = dateFormat(_value)
    jvmLineInfo()
  }
  function handleChangeSearchDate3(_value) {
    searchParams.date3 = _value
    listQuery3.startDateTime = dateFormat(_value)
    listQuery3.endDateTime = dateFormat(_value)
    memoryLineInfo()
  }
  function operationInfo() {
    getOperationInfo(null).then((res) => {
      if (res.success) {
        list.cpuUsed = res.result.cpuUsed
        list.diskTotal = res.result.diskTotal
        list.diskUsed = res.result.diskUsed
        list.jvmTotal = res.result.jvmTotal
        list.jvmUsed = res.result.jvmUsed
        list.memoryTotal = res.result.memoryTotal
        list.memoryUsed = res.result.memoryUsed
      }
    });
  }
  function cpuLineInfo() {
    let barData = []
    getCpuLineInfo(listQuery1).then((res) => {
      if (res.success) {
        if (res.result.length > 0) {
          for (let i = 0; i < res.result.length; i++) {
            let obj = { name: '', value: 0, seriesType: 'line' };
            obj.name = res.result[i].staticDate;
            obj.value = res.result[i].staticValue;
            barData.push(obj);
          }
          list.cpuLineData = barData
        } else {
          list.cpuLineData = []
        }
      }
    });
  }
  function jvmLineInfo() {
    let barData2 = []
    getJvmLineInfo(listQuery2).then((res) => {
      if (res.success) {
        if (res.result.length > 0) {
          for (let i = 0; i < res.result.length; i++) {
            let obj = { name: '', value: 0, seriesType: 'line' };
            obj.name = res.result[i].staticDate;
            obj.value = res.result[i].staticValue;
            barData2.push(obj);
          }
          list.jvmLineData = barData2
        } else {
          list.jvmLineData = []
        }
      }
    });
  }
  function memoryLineInfo() {
    let barData3 = []
    getMemoryLineInfo(listQuery3).then((res) => {
      if (res.success) {
        if (res.result.length > 0) {
          for (let i = 0; i < res.result.length; i++) {
            let obj = { name: '', value: 0, seriesType: 'line' };
            obj.name = res.result[i].staticDate;
            obj.value = res.result[i].staticValue;
            barData3.push(obj);
          }
          list.memoryLineData = barData3
        } else {
          list.memoryLineData = []
        }
      }
    });
  }





  operationInfo()
  cpuLineInfo()
  jvmLineInfo()
  memoryLineInfo()
</script>
<style lang="less" scoped>
  .fx {
    display: flex;
    padding: 0;
  }

  .fx_end {
    display: flex;
    justify-content: space-between;
  }

  .fx-center {
    justify-content: center;
    align-items: center;
  }

  p {
    margin: 0;
    padding: 0
  }

  a {
    font-size: 14px;
    color: #243AA6;
  }

  .dashBoard-container {
    padding: 18px;

    .whiteBg {
      background: #fff;
    }

    .grayBg {
      padding: 16px 16px 0 16px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      background: linear-gradient(146deg, #F6F7FC 0%, #FFFFFF 100%);
    }

    .square {
      width: 8px;
      height: 8px;
      background: #243AA6;
      display: inline-block;
      margin-right: 14px;
    }

    .rectangle {
      width: 4px;
      height: 12px;
      background: #FE3233;
      display: inline-block;
      margin-right: 8px;
      vertical-align: middle;
    }

    .top-box {
      padding: 16px 16px 0 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      p {
        font-size: 12px;
        color: #615851;
      }

      .num {
        font-weight: 600;
        font-size: 24px;
        color: #272624;
      }
    }

    .bottom-box {
      padding: 14px 18px 18px;
      font-size: 10px;
      color: #333333;

      .circular {
        width: 4px;
        height: 4px;
        margin-right: 10px;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        margin-top: -3px;
      }

      .green {
        background: rgba(0, 193, 89, 0.8);
        border: 1px solid #00C159;
      }

      .red {
        background: rgba(255, 0, 0, 0.6);
        border: 1px solid #FF0000;
      }
    }


  }
</style>
